import React from 'react'
import styles from '@/assets/css/detail.module.css';
import { TMap } from '@map-component/react-tmap';


const RoomInfo = () => {
    const [searchParams] = React.Router.useSearchParams()
    const [roomid] = React.useState(searchParams.get('roomid') ? searchParams.get('roomid') : 0)
    const [RoomDetail, SetRoomDetail] = React.useState<any>({flag_text: []})
    const [CommentList, SetCommentList] = React.useState([])

    React.useEffect(() => 
    {
        GetRoomInfoData();
    }, []);

    const GetRoomInfoData = async () => 
    {
        let result = await React.HTTP.post('/room/RoomInfo', {
            roomid: roomid
        })

        if (result && result.code == 1) 
        {
            SetRoomDetail(result.data.info);
            SetCommentList(result.data.commentlist);
        }
    }

    const ConfirmReserve = async () => 
    {
        // 判断用户是否登陆
        if(Object.getOwnPropertyNames(React.Business).length <= 0)
        {
            React.error('请先去登陆', () => React.navigate('/business/login'));
            return false;
        }
    
        React.navigate(`/room/confirm?roomid=${roomid}`)
    }
    return (
        <>
            <React.UI.Image src={RoomDetail.thumb_text} height={213} fit='cover' />

            <div className={styles.detail_top}>
                <div id="intro" className={styles.intro}>
                    <div className={styles.title}>{RoomDetail.name}</div>
                    <div className={styles.betwee}>
                        <div className={styles.left}>
                            {
                                RoomDetail.flag_text.map((item: string, index: number) =>{
                                    return(
                                        <span key={index}>{item}</span>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className={styles.title}>{RoomDetail.content}</div>
                </div>
                {/* 预定需知 */}
                <div className={styles.notesin}>
                    <div className={styles.title}>预订须知</div>
                    <div className={styles.item}>
                        <span className={styles.tips}>预订房型：</span>
                        <span>{RoomDetail.name}</span>
                    </div>
                    <div className={styles.item}>
                        <span className={styles.tips}>入离时间：</span>
                        <span>当天 12:00 后入住，次日 12:00 前退房</span>
                    </div>
                    <div className={styles.item}>
                        <span className={styles.tips}>剩余房间数量：</span>
                        <span>{RoomDetail.total}</span>
                    </div>
                </div>

                {/* 地图 */}
                <div className={styles.notesin}>
                    <TMap
                        mapKey="TOZBZ-OU2CX-JJP4Z-7FCBV-CDDJ2-AHFQZ"
                        center={{ lat: 39.984104, lng: 116.307503 }}
                        version='1.exp'
                    />
                </div>

                {/* 评价 */}
                <div id="comment" className={styles.comment}>
                    <div className={styles.title}>评价</div>
                    <React.UI.List style={{ '--border-top': '0', '--border-bottom': '0' }}>
                        {CommentList && CommentList.map((item:any) => (
                            <div className={styles.rate_list_item} key={item.id}>
                                <div className={styles.item_content}>
                                    <div className={styles.content_prefix}>
                                        <div className={styles.ratelist}>
                                            <div className={styles.image}>
                                                <img src={item.business.avatar_text} alt="" />
                                            </div>
                                            <p className={styles.nickname}>{item.business.nickname}</p>
                                        </div>
                                    </div>
                                    <div className={styles.content_main}>
                                        <div className={styles.rate}>
                                            <React.UI.Rate readOnly value={item.rate} style={{ '--star-size': '18px' }} />
                                        </div>
                                        <div className={styles.item_description}>
                                            <p>{item.content}</p>
                                            <p className={styles.item_time}>{item.createtime_text}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </React.UI.List>

                    <React.UI.AutoCenter>
                        {
                            CommentList && CommentList.length > 0 ? <React.Router.Link to={`/room/hotelrate?roomid=${roomid}`}>查看更多评价</React.Router.Link> : <div>暂无评价</div>
                        }
                    </React.UI.AutoCenter>
                </div>
            </div>

            <div className={styles.foot_bar}>
                <div className={styles.price}>
                    ￥{RoomDetail.price}
                </div>
                <React.UI.Button onClick={ConfirmReserve} color='primary' shape='rounded'>立即预定</React.UI.Button>
            </div>
        </>
    )
}

export default RoomInfo;